<template>
    <el-card>
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="名称" prop="name" :rules="{required: true, message: '请输入承运人名称', trigger: 'blur'}">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" :rules="[{required: true, message: '请输入联系人', trigger: 'blur'}]">
          <el-input v-model="editForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="cityCode"  :rules="{required: true, message: '请选择城市', trigger: 'change'}">
          <el-select v-model="editForm.cityCode">
            <el-option-group v-for="group in cities"  :label="group.text">
              <el-option v-for="item in group.children"   :label="item.text" :value="item.value"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="编码" prop="code" :rules="[{required: true, message: '请输入编码', trigger: 'blur'}]">
          <el-input v-model="editForm.code"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" :rules="[{required: true, message: '请选择状态', trigger: 'blur'}]">
         <el-select v-model="editForm.status ">
          <el-option label="已激活" value="available"></el-option>
          <el-option label="停用" value="unavalible"></el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordConfirmation" >
          <el-input v-model="editForm.passwordConfirmation" ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="roleId" >
          <el-input v-model="editForm.notes"  ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="onReturn">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script>
  export default {
    created() {
      this.loadGridData()
      this.loadRoleOptions()
      this.loadCity()
    },
    data() {
      var validatePass = (rule,value,callback) => {
        if(value===''){
          callback(new Error('请再次输入密码'));
        }
        else if(value!==this.editForm.password){
          callback(new Error('两次输入密码不一致!'));
        }else{
          callback();
        }
      };
      return {
				//编辑界面数据
				editForm: {
					name: '',
					contact: '',
					phone: '',
					cityCode: '',
					cityName: '',
					code: '',
					status: '',
					password: '',
					passwordConfirmation: null,
					notes:''
				},
				isNewPage:false,
				editFormRules: {
				  passwordConfirmation: [{ validator: validatePass, trigger: 'blur',required:true }]},
				roleOptions:{
				  name: ''
				},
				cities: {
				  text: ''
				}
     	}
    },
    methods: {
      loadGridData() {
			  let id=this.$route.params.id
			  this.isNewPage = id === undefined
			  if (this.isNewPage) {
			    return
			  }
			  else{
			    this.axios.get(`couriers/${id}`).then(response=>{
			    this.editForm=response.data
			    })
			  }
			},
      loadRoleOptions(){
        this.axios.get("/roles").then(response => {
				this.roleOptions=response.data
      })
      },
       loadCity(){
          this.axios.get("/cities").then(response =>{
          this.cities=response.data
          })
       },
			//编辑 or 新增
			onSubmit: function(){
				var _this = this
				_this.$refs.editForm.validate((valid) => {
					if (!valid) {
						return
					}

					_this.$confirm('确认提交吗？','提示',{}).then(() => {

						if (this.isNewPage) {
							_this.axios.post("/couriers", _this.editForm).then(response => {
								_this.$notify({
									title: '成功',
									message: '提交成功',
									type: 'success'
								});
								_this.editLoading = false
								_this.loadGridData()
							}).then(()=>{this.$router.push('/couriers')})
						}
						else {
						  let id=this.$route.params.id;
							_this.axios.put(`/couriers/${id}`, _this.editForm).then(response => {
								_this.editLoading = false
								_this.$notify({
									title: '成功',
									message: '提交成功',
									type: 'success'
								})
							}).then(()=>{this.$router.push('/couriers')})
						}
					})
				})
			},
			onReturn: function() {
				this.$router.push('/couriers')
			}
    }
  }
</script>
